<template>
  <!-- Navbar -->
  <compose view="./common/navbar.html"></compose>

  <!-- Navigation -->
  <compose view="./common/sidebar-nav.html"></compose>

  <!-- Main content -->
  <main class="main">
    <!-- Breadcrumb -->
    <ol class="breadcrumb" >

      <breadcrumbs></breadcrumbs>

      <!-- Breadcrumb Menu-->
      <li class="breadcrumb-menu">
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
          <a class="btn btn-secondary" href="#"><i class="icon-speech"></i></a>
          <a class="btn btn-secondary" ui-sref="app.main"><i class="icon-graph"></i> &nbsp;Dashboard</a>
          <a class="btn btn-secondary" ui-sref="app.main"><i class="icon-settings"></i> &nbsp;Settings</a>
        </div>
      </li>

    </ol>

    <div class="container-fluid">
      <router-view></router-view>
    </div>
    <!-- /.conainer-fluid -->

  </main>

  <!-- Aside Menu -->

  <compose view="./common/aside-menu.html"></compose>

  <!-- Footer -->

  <compose view="./common/footer.html"></compose>

</template>
